<template>

    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <Search :model="searchForm" @search="getList" @reset="resetSearchForm">
            <SearchItem label="搜索">
                <el-input v-model="searchForm.search" placeholder="名称" clearable></el-input>
            </SearchItem>
        </Search>

        <!-- 新增|刷新 -->
        <ListHeader layout="create,refresh" @create="handleCreate" @refresh="getList" />

        <el-table :data="tableData" stripe style="width: 100%; text-align: center" v-loading="loading" border>
            <el-table-column type="index" label="序号" width="100" style="text-align: center" align="center " />
            <el-table-column prop="name" label="平台名称" width="200" style="text-align: center" align="center " />
            <el-table-column prop="en_name" label="英文名称" width="200" style="text-align: center" align="center " />
            <el-table-column label="平台logo" style="text-align: center" align="center ">
                <template #default="scope">
                    <el-image style="width: 40px; height: 40px" :src="scope.row.icon" fit="scale-down" />
                </template>
            </el-table-column>
            <el-table-column prop="introduce" label="简介" style="text-align: center" align="center " />
            <el-table-column label="是否可用" style="text-align: center" align="center ">
                <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.is_activate == 1">可用</el-tag>
                    <el-tag type="primary" v-else>不可用</el-tag>

                </template>

            </el-table-column>
            <el-table-column label="支持类型" style="text-align: center" align="center ">
                <template #default="scope">
                    <el-tag type="primary" v-if="has_article(scope.row.support_type)">文章</el-tag>
                    <el-tag type="primary" v-if="has_video(scope.row.support_type)">视频</el-tag>
                    <el-tag type="primary" v-if="has_image(scope.row.support_type)">图片</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button @click="plateEdit(scope.row)" text type="primary" class="p-1">
                        <el-icon class="el-icon--left" :size="16">
                            <Edit />
                        </el-icon>修改
                    </el-button>

                    <el-popconfirm title="是否要删除该平台？" confirmButtonText="确认" cancelButtonText="取消"
                        @confirm="handleDelete(scope.row.id)">
                        <template #reference>
                            <el-button text type="danger" class="p-1">
                                <el-icon class="el-icon--left" :size="16">
                                    <Delete />
                                </el-icon>删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="pageSize" @current-change="getList" />
        </div>


        <!-- 新增/修改 -->
        <FormDrawer destroyOnClose ref="formDrawerRef" size="30%" :title="drawerTitle" @submit="plateFromsubmit">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="150px" :inline="false">
                <el-form-item label="平台名称" prop="name">
                    <el-input v-model="form.name" placeholder="平台名称"></el-input>
                </el-form-item>

                <el-form-item label="英文名" prop="en_name">
                    <el-input v-model="form.en_name" placeholder="英文名"></el-input>
                </el-form-item>

                <el-form-item label="上传logo">
                    <UploadFile :data="{ img_url: form.icon, img_show_url: icon_url }" @success="handleUploadSuccess" />
                </el-form-item>

                <el-form-item label="简介" prop="introduce">
                    <el-input v-model="form.introduce" placeholder="简介"></el-input>
                </el-form-item>

                <el-form-item label="支持类型">
                    <el-select v-model="form.support_type" multiple placeholder="Select" style="width: 240px">
                        <el-option v-for="i in contentType" :key="i.value" :label="i.label" :value="i.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="是否激活">
                    <el-radio-group v-model="form.is_activate" class="ml-4">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
        </FormDrawer>
    </el-card>

</template>
<script setup>
// vue 内部方法
import { ref } from 'vue'

// 页面组件
import ListHeader from "~/components/ListHeader.vue"
import FormDrawer from "~/components/FormDrawer.vue"
import Search from "~/components/SearchForm.vue"
import SearchItem from "~/components/SearchItem.vue"
import UploadFile from "~/components/UploadFile.vue"

// 公共方法
import { useInitTable, useInitForm } from "~/composables/useCommon"
import { getContentType } from "~/composables/util"


// api
import {
    getPlatefromList,
    postPlatefrom,
    putPlatefrom,
    deletePlatefrom,
} from "~/api/platefrom/index"


// 初始化表格
const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    currentPage,
    total,
    pageSize,
    getList,
    handleDelete,
} = useInitTable({
    searchForm: { search: "", id: "", name: "" },
    requestListAPI: getPlatefromList,
    delete: deletePlatefrom,
    // pageSize: store.state.pageSize.MessageList,
    pageSize: 10,
    onGetListSuccess: (res) => {
        tableData.value = res.results
    },
})

// 初始化表单
const {
    formDrawerRef,
    formRef,
    form,
    rules,
    editId,
    drawerTitle,
    handleSubmit,
    resetForm,
    handleCreate,
    handleEdit,
} = useInitForm({
    getList,
    create: postPlatefrom,
    update: putPlatefrom,
    form: {
        name: "",
        en_name: "",
        icon: "",
        introduce: "",
        is_activate: '0',
        support_type: "",
        image_id: '',
    },
    // onGetDataSuccess: (res) => {
    //   // 将接口返回的公司列表数据命名为companyAllList
    //   companyAllList.value = res.data.name;
    // },
    rules: {
        name: [
            {
                required: true,
                message: "名称不能为空",
                trigger: "blur",
            },
        ],
    }

});

const icon_url = ref('')

const has_article = (support_type) => {
    return support_type.includes('1')
}

const has_video = (support_type) => {
    return support_type.includes('2')
}

const has_image = (support_type) => {
    return support_type.includes('3')
}

// 重写submit方法
const plateFromsubmit = () => {
    if (form.support_type.length > 0) {
        form.support_type = form.support_type.join(',')
    } else {
        form.support_type = ''
    }
    handleSubmit()
}

// 重写修改的方法
const plateEdit = (row) => {
    if (typeof row.support_type === 'string') {
        if (row.support_type.length > 0) {
            row.support_type = row.support_type.split(',')
        } else {
            row.support_type = []
        }
    }

    icon_url.value = row.icon
    handleEdit(row)
}


// 重写resetForm方法
const plateFromreset = () => {
    resetForm('form')
    icon_url.value = ''
}


// 内容类型
const contentType = getContentType()

// 营业执照上传成功
const handleUploadSuccess = (res) => {
    form.icon = res.response.url;
    form.image_id = res.response.id;
    icon_url.value = res.response.url;
}
</script>

<style scoped></style>